<template>
  <div class="scrap-detail-dialog dialog">
    <basic-dialog
      :visible="open"
      minWidth="440px"
      :title="`${$attrs.toolData.msg}报废详情`"
      isShowClose
      :isShowInnerLoading="isShowInnerLoading"
      :isFullScreen="false"
      @close="$emit('close', false)"
    >
      <div class="dialog-content padding-20">
        <p>
          该{{$attrs.toolData.msg}}于
          <span>{{
              detailData.scrapDate | toTime
            }}</span>
          由
          <span>{{
              detailData.operatorName | toHorizontalLine
            }}</span>
          填报报废
        </p>
        <p>报废原因: <span style="word-break: break-all">{{ detailData.scrapReason | toHorizontalLine }}</span></p>
        <img-record title="附件" :imgList="detailData.attachments"></img-record>
        <div style="height:28px">
          <div class="float-right">审批人： {{detailData.approveName | toHorizontalLine}}</div>
        </div>
      </div>
    </basic-dialog>

  </div>
</template>

<script>
import { getScrapMoldDetail } from 'src/boot/tool/tool-code'
export default {
  name: 'scrap-detail-dialog',
  props: {
    open: Boolean,
    scrapDetail: Object
  },
  data () {
    return {
      detailData: {},
      isShowInnerLoading: false
    }
  },
  computed: {
    // 显示标题
  },
  watch: {
    open (newPro) {
      this.detailData = {}
      newPro && this.getDetail()
    }
  },
  mounted () {},
  methods: {
    getDetail () {
      this.isShowInnerLoading = true
      const id = this.scrapDetail.id
      getScrapMoldDetail(id).then(res => {
        this.detailData = res.data
        this.isShowInnerLoading = false
      }).catch(err => {
        console.log(err)
        this.isShowInnerLoading = false
      })
    }
  }
}
</script>
<style lang="stylus">
.code-edit-header{
  height 40px
  line-height 40px
  font-size 18px
  padding-right 5px
  .right-btn{
    margin-top 5px
    margin-right 5px
  }
}
.img-item{
  width:88px;
  height:88px;
  background-color: #F6F6F6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

</style>
